<template>
  <div class="app-container" v-loading="loading">
    <CommonContainer title="基础信息">
      <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="规则名称:" prop="ruleName">
              {{ form.ruleName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品方案:" prop="planName">
<!--              <span class="lineWrap">{{ form.planName }}</span>-->
                                        {{ form.planName }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户类型:" prop="customerType">
              <dict-tag :options="dict.type.customer_type" :value="form.customerType"/>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否需信审:" prop="needCreditReview">
              <el-radio-group v-model="form.needCreditReview" disabled>
                <el-radio :label="1">免信审</el-radio>
                <el-radio :label="2">需信审</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否需提供担保人信息:" prop="needGuarantor">
              <el-radio-group v-model="form.needGuarantor" disabled>
                <el-radio :label="1">需要</el-radio>
                <el-radio :label="2">不需要</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="租赁用途:" prop="leasePurpose">
              <e-switch v-model="form.leasePurpose" disabled></e-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户标签:" prop="customerSource">
              <e-switch v-model="form.customerSource" disabled></e-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户属性:" prop="clientProperty">
              <e-switch v-model="form.clientProperty" disabled></e-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户等级:" prop="customerGrade">
              <e-switch v-model="form.customerGrade" disabled></e-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="租期:" prop="leaseTerm">
              <e-switch v-model="form.leaseTerm" disabled></e-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">

            <div class="flex-row-center">
              <el-form-item label="台数:" prop="unitsStatus" style="width: 70px">
                <e-switch v-model="form.unitsStatus" disabled></e-switch>
              </el-form-item>
              <template v-if="form.unitsStatus==1">
                <el-form-item prop="unitsType" style="width: 50%;position: relative;top: 18px">
                  <el-select v-model="form.unitsType" clearable style="width: 100%" disabled>
                    <template v-for="dict in dict.type.credit_review_units">
                      <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </template>
                  </el-select>
                </el-form-item>

                <template v-if="form.unitsType > 2">
                  <el-form-item prop="unitsDays" style="width: 130px;position: relative;top: 18px;left: 5px">
                    <el-input v-model="form.unitsDays" clearable disabled>
                      <template slot="append">天内</template>
                    </el-input>
                  </el-form-item>
                </template>
              </template>
            </div>


          </el-col>

          <el-col :span="8">
            <div class="flex-row-center" style="position: relative">
              <el-form-item label="新车采购总额/旧车当前估值总额:" prop="amountStatus">
                <e-switch v-model="form.amountStatus" disabled></e-switch>
              </el-form-item>
              <template v-if="form.amountStatus==1">
                <div class="flex-row-center" style="position: absolute;top: 34px;left: 70px">
                  <el-form-item prop="amountType" style="width: 100%;">
                    <el-select v-model="form.amountType" clearable style="width: 100%" disabled>
                      <template v-for="dict in dict.type.credit_review_amount">
                        <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                      </template>
                    </el-select>
                  </el-form-item>

                  <template v-if="form.amountType > 2">
                    <el-form-item prop="amountDays" style="width: 200px;position: relative;left: 10px">
                      <el-input v-model="form.amountDays" clearable disabled>
                        <template slot="append">天内</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </div>
              </template>
            </div>
          </el-col>

        </el-row>
      </el-form>
    </CommonContainer>

    <CommonContainer title="规则配置" v-if="switchOneOpen">
      <div class="card-wrap paddingAll20" label-width="86px">

        <el-table
            :data="form.crRuleItems"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
          <template slot="empty">
            <el-empty :image-size="50" description="暂无规则配置信息"></el-empty>
          </template>
          <el-table-column
              v-if="form.leasePurpose==1"
              align="center"
              prop="leasePurpose"
              label="租赁用途"
              min-width="120">
            <template v-slot="{row}">
              <dict-tag :options="dict.type.rental_purpose" :value="row.leasePurpose"/>
            </template>
          </el-table-column>
          <el-table-column
              v-if="form.customerSource==1"
              align="center"
              prop="customerSource"
              label="客户标签"
              min-width="120">
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_label" :value="row.customerSource"/>
            </template>
          </el-table-column>

          <el-table-column
              v-if="form.clientProperty==1"
              align="center"
              prop="updateTime"
              label="客户属性"
              min-width="120">
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_property" :value="row.clientProperty"/>
            </template>
          </el-table-column>
          <el-table-column
              v-if="form.customerGrade==1"
              align="center"
              prop="customerGrade"
              label="客户等级"
              min-width="120">
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_level" :value="row.customerGrade"/>
            </template>
          </el-table-column>
          <el-table-column
              v-if="form.leaseTerm==1"
              align="center"
              prop="updateTime"
              label="租期(月)"
              min-width="120">
            <template v-slot="{row}">
              {{ `(${row.minLeaseTerm>0? row.minLeaseTerm:0},${(row.maxLeaseTerm&&row.maxLeaseTerm!=0)?row.maxLeaseTerm:'3600'}]` }}
            </template>
          </el-table-column>
          <el-table-column
              v-if="form.unitsStatus==1&& form.unitsType"
              align="center"
              prop="updateTime"
              label="30天内累计申请台数(台)"
              min-width="220">
            <template slot="header" slot-scope="scope">
              <div class="inline-flex">
                <span v-if="form.unitsType>2">{{ form.unitsDays }}天内</span>
                <dict-tag :options="dict.type.credit_review_units" :value="parseInt(form.unitsType)"/>
              </div>
            </template>
            <template v-slot="{row}">
              {{ `(${row.minUnits>0? row.minUnits:0},${(row.maxUnits&&row.maxUnits!=0)?row.maxUnits:'∞'}]` }}
            </template>
          </el-table-column>
          <el-table-column
              v-if="form.amountStatus==1&&  form.amountType"
              align="center"
              prop="updateTime"
              label="30天内累计申请金额(元)"
              min-width="220">
            <template slot="header" slot-scope="scope">
              <div class="inline-flex">
                <span v-if="form.amountType>2">{{ form.amountDays }}天内</span>
                <dict-tag :options="dict.type.credit_review_amount" :value="parseInt(form.amountType)"/>
              </div>
            </template>
            <template v-slot="{row}">
              {{ `(${row.minAmount>0? row.minAmount:0},${(row.maxAmount&&row.maxAmount!=0)?row.maxAmount:'∞'}]` }}
            </template>
          </el-table-column>


        </el-table>
      </div>
    </CommonContainer>

    <CommonContainer v-if="form.needCreditReview==2" title="资料配置">
      <div class="card-wrap paddingAll20" label-width="86px">

        <el-table
            :data="filesConfigs"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
          <template slot="empty">
            <el-empty :image-size="50" description="暂无规则信息"></el-empty>
          </template>
          <el-table-column
              align="center"
              prop="filesTitle"
              label="资料标题"
              min-width="180">
          </el-table-column>
          <el-table-column
              align="center"
              prop="infos"
              label="资料内容"
              min-width="180">
            <template v-slot="{row}">
              {{ row.infos || '--' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </CommonContainer>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">返回</el-button>
    </div>

  </div>
</template>

<script>

import * as rulesApi from "@/api/letterReview/rules";

export default {
  dicts: ['business_type', 'customer_type', 'credit_review_units', 'credit_review_amount', 'rental_purpose', 'customer_label', 'customer_level', 'customer_property'],
  data() {
    return {
      loading: false,
      buttonLoading: false,
      form: {
        id: null,
        ruleName: null,
        planId: null,
        planName: null,
        customerType: null,
        needCreditReview: 1,
        needGuarantor: 1,
        leasePurpose: 1,
        customerSource: 1,
        clientProperty: 1,
        customerGrade: 1,
        leaseTerm: 1,
        unitsStatus: 2,
        unitsType: null,
        unitsDays: 30,
        amountStatus: 2,
        amountType: null,
        amountDays: 30,
        crRuleItems: [],
        basicData: null,//基础资料 资料ID逗号分割
        chooseOneData: null,//择一提供资料 资料ID逗号分割
        selectiveData: null,//可选择性资料 资料ID逗号分割
        basicDataNames: null,//基础资料 资料ID逗号分割
        chooseOneDataNames: null,//择一提供资料 资料ID逗号分割
        selectiveDataNames: null,//可选择性资料 资料ID逗号分割

      },

      filesConfigs: [
        {
          filesTitle: '基础资料',
          filesContent: null,
          ids: [],
          infos: null,
          type: 1
        },
        {
          filesTitle: '择一提供资料',
          filesContent: null,
          ids: [],
          infos: null,
          type: 2
        },
        {
          filesTitle: '可选择性资料',
          filesContent: null,
          ids: [],
          infos: null,
          type: 3
        }
      ],
      selectedFilesList: []

    };
  },

  computed: {
    switchOneOpen() {
      let open = false;
      if (this.form.leasePurpose == 1 || this.form.customerSource == 1 || this.form.clientProperty == 1 || this.form.customerGrade == 1 || this.form.leaseTerm == 1 || this.form.unitsStatus == 1 || this.form.amountStatus == 1) {
        open = true
      }
      return open
    }
  },
  created() {
    this.getDetail()
  },
  methods: {

    //编辑回显
    getDetail() {
      this.loading = true
      rulesApi.ruleDetail(this.$route.query.id).then(res => {
        this.form = res.data;
        this.filesConfigs[0].infos = this.form.basicDataNames.join(',');
        this.filesConfigs[1].infos = this.form.chooseOneDataNames.join(',');
        this.filesConfigs[2].infos = this.form.selectiveDataNames.join(',');
      }).finally((f) => {
        this.loading = false
      })
    },
    cancel() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    },
  }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.mySpan {
  margin: 0;
  padding: 0;
}

.lineWrap {
  white-space: nowrap; /*强制span不换行*/
  display: block; /*将span当做块级元素对待*/
  width: 100%; /*限制宽度*/
  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}


</style>
